<template>
  <div class="box">
    <div class="content">
      
      <template v-if="!isChange">
        <div class="nav">
          <span :class="{active: login_method === 'is_pwd'}" @click="change_login_method('is_pwd')">密码登录</span>
          <span :class="{active: login_method === 'is_sms'}" @click="change_login_method('is_sms')">短信登录</span>
        </div>

        <PasswordLogin v-if="login_method === 'is_pwd'" @changePassword="changePassword"/>
        <SMSLogin v-if="login_method === 'is_sms'" />
      </template>
      <template v-else>
        <div class="nav2">
          <span>修改密码</span>
        </div>
        <ChangePassword @changePassword="changePassword"/>
      </template>

    </div>
  </div>
</template>

<script>
import PasswordLogin from './passwordLogin.vue'
import SMSLogin from './smsLogin.vue'
import ChangePassword from './changePassword.vue';
export default {
  name: "loginBox",
  components: {
    PasswordLogin,
    SMSLogin,
    ChangePassword
  },
  data() {
    return {
      login_method: 'is_pwd',
      msg: 'register',
      isChange: false
    }
  },
  methods: {
    change_login_method(method) {
      this.login_method = method;
    },
    changePassword(isChange){
      this.isChange = isChange
    }
  }
}
</script>

<style scoped>

/* 切换密码登录、短信登录 */
.box {
  width: 400px;
  height: 500px;
  background-color: white;
  border-radius: 10px;
  position: relative;
}

.content {
  position: absolute;
  top: 40px;
  width: 280px;
  left: 60px;
}

.nav {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav>span {
  margin: 0 20px 0 35px;
  color: darkgrey;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid darkgrey;
}

.nav>span.active {
  color: black;
  border-bottom: 3px solid black;
  padding-bottom: 9px;
}

.nav2 {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav2>span {
  margin: 0 20px 0 100px;
  color: black;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid black;
}

/* 父组件样式影响子组件 */
::v-deep .el-input,
::v-deep .el-button {
  margin-top: 10px;
}

::v-deep .el-button {
  width: 100%;
  font-size: 18px;
}

::v-deep .el-form {
  margin-top: 30px;
}

/* 立即注册按钮 */
.foot>span {
  float: right;
  margin-top: 20px;
  color: orange;
  cursor: pointer;
}
</style>
